<template>
  <div class='wrapper'>
    <div class="titile">
      <h1 class="title">精选城市</h1>
      <p>查看全部 <span class="iconfont ">&#xe743;</span></p>
    </div>
    <div class="item-wrapper">
      <swiper :options="swiperOptions">
        <swiper-slide>
          <div class="item">
            <div class="item-img">
              <img src="https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20200213/35dd1b38dec444da988a30bd435d9a24.jpg?x-oss-process=image/resize,w_250">
            </div>
            <div class="item-detailed">
              <h1 class="title">富力现代广.富力现代广.富力现代广.富力现代广... </h1>
              <span class="label-icon-sale">特卖</span>
              <p class="Positionsize">博罗县 | 68-249㎡</p>
              <p class="unitprice"><span>7000元/平</span></p>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="item">
            <div class="item-img">
              <img src="https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20200213/35dd1b38dec444da988a30bd435d9a24.jpg?x-oss-process=image/resize,w_250">
            </div>
            <div class="item-detailed">
              <h1 class="title">富力现代广.富力现代广.富力现代广.富力现代广... </h1>
              <span class="label-icon-selection">严选</span>
              <p class="Positionsize">博罗县 | 68-249㎡</p>
              <p class="unitprice"><span>7000元/平</span></p>

            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="item">
            <div class="item-img">
              <img src="https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20200213/35dd1b38dec444da988a30bd435d9a24.jpg?x-oss-process=image/resize,w_250">
            </div>
            <div class="item-detailed">
              <h1 class="title">富力现代广.富力现代广.富力现代广.富力现代广... </h1>
              <span class="label-icon-lnsale">在售</span>
              <p class="Positionsize">博罗县 | 68-249㎡</p>
              <p class="unitprice"><span>7000元/平</span></p>

            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'CitySelection',
    data () {
      return {
        swiperOptions: {
          pagination: '.swiper-pagination', // 初始化元素
          slidesPerView: 2,
          freeMode: false,                  //
          updateOnWindowResize: false,      // 重新计算(update和breakpoints等)
          paginationType: false,            // 数字分页器
          observeParents: true,             // 自动刷新一次
          observer: true,                    // 监听自身、父元素发生变化就会自我刷新一次，解决宽度计算问题
        },
        list: [
          'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/0756f280964943359fe638a995ae6289.jpg?x-oss-process=image/resize,w_480',
          'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/0756f280964943359fe638a995ae6289.jpg?x-oss-process=image/resize,w_480',
          'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/0756f280964943359fe638a995ae6289.jpg?x-oss-process=image/resize,w_480',
        ],
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    wrapper()
    TopBorder()
    padding-top .1rem

  .titile
    display flex
    justify-content space-between
    align-items center
    margin-bottom .3rem

  .wrapper
    wrapper()
    TopBorder()
    margin-top .6rem

  .title
    font-size .4rem
    font-weight 900
    line-height 1rem

  .item-wrapper
    overflow hidden

  .item
    margin-right .1rem
    display flex
    flex-direction column
    background-color none

  .item-img img
    img()

  .item-detailed
    position relative

  .item-detailed-title
    font-size .3rem
    font-weight 900

  .item-detailed h1
    width 2rem
    font-size .32rem
    font-weight 900
    line-height .58rem
    overflowEllipsis()

  .Positionsize
    line-height .4rem
    color #798089

  .unitprice
    line-height .8rem
    color #798089

  .unitprice span
    color #ff9100
    font-weight bolder


  .label-icon-lnsale
    lnsale()
    position absolute
    top 0.1rem
    right 0

  .label-icon-sale
    sale()
    position absolute
    top 0.1rem
    right 0

  .label-icon-selection
    selection()
    position absolute
    top 0.1rem
    right 0


</style>
